<template>
  <div class="config-def">
    <div class="UMLClass">
      <configdefContainerVue
        :id="'container'"
        :treeData="data"
        @getTreeData="getTreeData"
        @getApiConfigDef="getApiConfigDef"
        v-if="flag"
      ></configdefContainerVue>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, PropType } from 'vue'
import { ITabState } from '@/render/store/base/types'
import { useStore } from '@/render/store/index'
import handleModel from '@/render/utils/tree2Model'

import configdefContainerVue from './cmps/configdef-container.vue'
export default defineComponent({
  components: {
    configdefContainerVue
  },
  props: {
    tab: {
      type: Object as PropType<ITabState>,
      required: true
    }
  },
  setup(props) {
    const store = useStore()

    const data = ref()
    const flag = ref(false)

    const getTreeData = (data: any) => {
      data.value = JSON.parse(JSON.stringify(data))
    }
    const getApiConfigDef = (data: any) => {
      console.log(data)
      store
        .dispatch('drives/addApiConfigDef', {
          projectName: props.tab.projectName,
          projectModuleName: props.tab.moduleName,
          data
        })
        .then((res) => {
          console.log(res)
        })
    }
    const update = () => {
      store
        .dispatch('configdef/updateModuleConfigDef', {
          projectName: props.tab.projectName,
          projectModuleName: props.tab.moduleName,
          module: handleModel(data.value)
        })
        .then((res) => {
          console.log(res)
        })
    }
    const loadModuleConfigDef = () => {
      const projectName = props.tab.projectName
      const projectModuleName = props.tab.moduleName
      store
        .dispatch('configdef/loadModuleConfigDef', {
          projectName,
          projectModuleName
        })
        .then((res) => {
          console.log(res)
          data.value = res
          flag.value = true
        })
        .catch((res) => {
          console.log(res)
        })
    }
    loadModuleConfigDef()

    return { data, flag, getTreeData, getApiConfigDef, update }
  }
})
</script>

<style scoped lang="less">
.config-def {
  .UMLClass {
    border: 1px solid #e4e7ed;
    margin-top: 10px;
    height: 660px;
    border-radius: 4px;
  }
}
</style>
